<template>
	<view>
		<view class="top-fixed">
			<view class="acea-row row-middle row-between rent-tit">
				<view class="text line1" v-if="type=='rentOut'">{{leaseInfo}}</view>
				<view class="text line1" v-if="type=='rentAsk'">找100-200㎡餐饮店铺</view>
				<view class="acea-row row-middle">
					<view class="icon" @click="toPage('/pages/others/chooseTemplate/chooseTemplate')">
						<image src="@/static/images/lease_add.png" mode=""></image>
					</view>
					<view class="icon">
						<image src="@/static/images/lease_search.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between filtration">
				<view class="acea-row row-middle filteration-l">
					<view :class="[filterOn==index?'filteration-l-on':'']" v-for="(item,index) in filterList"
						@click="filterOn=index">{{item}}</view>
				</view>
				<view class="acea-row row-middle filtration-r">
					<view class="acea-row row-middle filtration-r-btn"
						:style="{'color':(currentIndex==0&&show)?activeColor:barTextColor}" @click="itemClick(0)">
						<view class="text line1">区域</view>
						<view class="sanjiao"></view>
					</view>
					<view class="acea-row row-middle filtration-r-btn"
						:style="{'color':(currentIndex==1&&show)?activeColor:barTextColor}" @click="itemClick(1)">
						<view class="text line1">筛选</view>
						<view class="sanjiao"></view>
					</view>
				</view>
			</view>
			<!-- 区域 -->
			<view class="dropdown-box acea-box" :style="{'opacity':show?'1':'0','display':show?'block':'none'}"
				v-if="currentIndex==0">
				<view class="aside">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item" v-for="(item,index) in aceaArr" :key="index"
							:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':(currentAceaAsideIndex==index)?activeColor:itemTextColor}"
							@tap.stop="currentAceaAsideIndex=index">{{item.type}}</view>
					</scroll-view>
				</view>
				<view class="conter">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item"
							:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':(currentAceaConterIndex==index)?activeColor:itemTextColor}"
							v-for="(item,index) in aceaConterArr[currentAceaAsideIndex]" :key="index"
							@tap.stop="currentAceaConterIndex=index">{{item}}</view>
					</scroll-view>
				</view>
				<view class="acea-row row-middle row-between acea-btn">
					<view class="reset" @tap.top="aceaReset()">重置</view>
					<view class="confirm" @tap.top="aceaConfirm()">确认</view>
				</view>
			</view>

			<!-- 筛选 -->
			<view class="filtrate-box"
				:style="{backgroundColor:bgcolor,'opacity':show?'1':'0','display':show?'block':'none'}"
				v-if="currentIndex==1&&filtrateShow">
				<view class="aside">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="dropdown-item" v-for="(item,index) in filtrateArr" :key="index"
							:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+4+'rpx','color':(currentFiltrateAsideIndex==index)?activeColor:itemTextColor}"
							@tap.stop="currentFiltrateAsideIndex=index">{{item.type}}</view>
					</scroll-view>
				</view>
				<view class="conter">
					<scroll-view scroll-y="true" style="height: 100%;">
						<view class="conter-title"
							:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+4+'rpx'}">
							{{filtrateArr[currentFiltrateAsideIndex].type}}
						</view>
						<view :class="['dropdown-item',currentFiltrateConterIndex==index?'on':'']"
							:style="{'height':itemHeight+10+'rpx','lineHeight':itemHeight+10+'rpx','fontSize':itemFontSize+'rpx','color':(currentFiltrateConterIndex==index)?activeColor:itemTextColor}"
							v-for="(item,index) in filtrateConterArr[currentFiltrateAsideIndex]" :key="index"
							@tap.stop="currentFiltrateConterIndex=index">{{item}}</view>
					</scroll-view>
				</view>
				<view class="acea-row row-middle row-between filtrate-btn">
					<view class="reset" @tap.top="filtrateReset()">重置</view>
					<view class="confirm" @tap.top="filtrateConfirm()">确认</view>
				</view>
			</view>
		</view>
		<!-- 求租 -->
		<view class="list rent-ask" v-if="type=='rentAsk'">
			<view class="item">
				<view class="acea-row row-middle row-between top-info">
					<view>3天内更新</view>
					<view class="close">×</view>
				</view>
				<view class="acea-row row-middle row-between sell-goods">
					<view class="goods-img">
						<image src="" mode="" class="img"></image>
						<view class="tag line1">
							好铺优选
						</view>
						<view class="acea-row row-middle distance">
							<image src="@/static/images/location.png" mode=""></image>
							<text>距您1.4km</text>
						</view>
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="title line1">
							出售丨 自用餐桌椅 丨10套
						</view>
						<view class="acea-row row-middle">
							<view class="sell-price">
								<text>1200</text>元/月
							</view>
							<view class="transfer-price">转让费: <text>10万</text></view>
						</view>
						<!-- <view class="gold-coin">
							<image src="@/static/images/goldcoin_icon.png" mode=""></image>
							<view class="num">25800</view>
						</view> -->
						<view class="acea-row goods-tag">
							<view class="tag-tit">
								优势：
							</view>
							<view class="tag">关键词1</view>
							<view class="tag">关键词2</view>
							<view class="tag">7年老店</view>
							<view class="tag">关键词2</view>
							<view class="tag">关键词2</view>
						</view>
					</view>
				</view>
				<!-- 适合场所 -->
				<view class="suitable-box">
					<!-- <text>优势：</text> -->
					<text class="suitable">酒吧</text>
					<text class="suitable">KTV</text>
					<text class="suitable">休闲娱乐</text>
					<text class="suitable">酒吧</text>
					<text class="suitable">休闲娱乐</text>
				</view>
				<view class="acea-row row-middle row-between visit-box">
					<view class="visit-advtar-box">
						<view class="visit-advtar">
							<image src="@/static/images/f.png" mode="" v-for="(item,index) in visitInfo" :key="index"
								:style="{left: (30 * index) + 'rpx'}"></image>
						</view>
						<view class="visit-num">18288人浏览 已成功匹配12254人</view>
					</view>

					<view class="visit-l">
						<view class="visit-num">5866人咨询</view>
						<view class="visit-btn" @click="toConcat(item.contacts)">
							立即咨询
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 出租 -->
		<view class="list rent-out" v-if="type=='rentOut'">
			<view class="item">
				<view class="acea-row row-middle row-between top-info">
					<view>3天内更新</view>
					<view class="close">×</view>
				</view>
				<view class="title line1">
					找贵阳市550-600㎡左右商铺做培训机构
				</view>
				<view class="acea-row goods-tag">
					<view class="tag">培训</view>
					<view class="tag">教育</view>
					<view class="tag">关键词2</view>
					<view class="tag">关键词2</view>
				</view>
				<view class="acea-row row-between row-middle contact-box">
					<view class="acea-row row-middle contact-info">
						<image src="@/static/images/f.png" mode=""></image>
						<view class="name">
							<view class="line1">联系人：张女士</view>
							<view class="line1">联系电话：136****6587</view>
						</view>
					</view>
					<view class="visit-l">
						<view class="visit-num">5866人咨询</view>
						<view class="visit-btn" @click="toConcat(item.contacts)">
							立即咨询
						</view>
					</view>
				</view>
				<view class="acea-row row-middle distance">
					<image src="@/static/images/location_gray.png" mode=""></image>
					<text>距您1.4km</text>
				</view>
				<!-- 浏览、咨询统计 -->
				<view class="acea-row row-middle row-between visit-box">
					<view class="visit-advtar">
						<image src="@/static/images/f.png" mode="" v-for="(item,index) in visitInfo" :key="index"
							:style="{left: (20 * index) + 'rpx'}"></image>
					</view>
					<view class="acea-row row-middle row-between visit-l">
						<view class="visit-num">18288人浏览</view>
						<view class="visit-num">已成功匹配9888人</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-mask" :class="[show?'bg-mask-show':'']" @tap="maskClose" @touchmove="touchControl"></view>
	</view>
</template>

<script>
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default {
		data() {
			return {
				currentIndex: '',
				itemHeight: 88,
				itemPadding: 24,
				itemFontSize: 28,
				bgcolor: '#fff',
				activeColor: '#ee212d',
				itemTextColor: '#666',
				barTextColor: '#383838',
				// 区域
				currentAceaAsideIndex: 0,
				currentAceaConterIndex: 0,
				// 筛选
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: 0,
				show: false,
				filtrateShow: false,
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				leaseInfo: '出租600平米培训机构',
				type: 'rentAsk', //rentOut  出租   rentAsk  求租
				filterList: ['推荐', '附近', '最新'],
				filterOn: 0,
				// 区域数组
				aceaArr: [{
						type: '地铁',
						list: ['1号线', '2号线']
					},
					{
						type: '区域',
						list: ['岳麓区', '天心区', '开福区', '雨花区']
					}
				],
				aceaConterArr: [
					['1号线', '2号线', '3号线', '4号线', '5号线', '6号线', '7号线', '2号线', '2号线'],
					['岳麓区', '天心区', '开福区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区']
				],
				// 筛选数组
				filtrateArr: [{
						type: '地铁',
						list: ['1号线', '2号线']
					},
					{
						type: '区域',
						list: ['岳麓区', '天心区', '开福区', '雨花区']
					}
				],
				filtrateConterArr: [
					['1号线', '2号线', '3号线', '4号线', '5号线', '6号线', '7号线', '2号线', '2号线'],
					['岳麓区', '天心区', '开福区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区雨花区雨花区雨花区雨花区雨花区雨花区', '雨花区', '雨花区']
				],
			};
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
		},
		methods: {
			toPage,
			itemClick(index) {
				if (index == 1) this.filtrateShow = true
				if (this.currentIndex == index) {
					this.show = !this.show
				} else {
					this.currentIndex = index
					this.show = true
				}
			},
			filtrateConfirm() {
				// if (this.isNeedChangeTitle) {
				// 	this.updateArr.splice(this.currentIndex, 1, this.aceaConterArr[this.currentFiltrateAsideIndex][this.currentFiltrateConterIndex])
				// }
				this.show = false
			},
			filtrateReset() {
				this.show = false
			},
			maskClose() {
				if (!this.maskTouch) return
				this.show = false
			},
			//
			touchControl() {
				if (this.isTouchPrevent) {
					this.maskClose()
				}
			},
			toConcat(contact) {
				if (!contact || contact.length < 1) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}

				getApp().globalData.into_singleChatRoom({
					phone:contact[0].contactPhone,
					contactId:contact[0].contactId,
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-mask {
		position: fixed;
		top: 220rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		// z-index: 90;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.top-fixed {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.rent-tit {

		background: #EE212D;
		padding: 30rpx;

		.text {
			width: calc(100% - 198rpx);
			font-size: 40rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 54rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.filtration {
		background: #ffffff;
		padding: 30rpx;

		.filteration-l {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);

			.filteration-l-on {
				font-size: 36rpx;
				font-weight: 500;
				color: rgba(238, 33, 45, 1);
			}

			view {
				margin-right: 36rpx;
			}
		}

		.filtration-r {
			.filtration-r-btn {
				margin-left: 48rpx;

				.text {
					width: 80rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}

				.sanjiao {
					width: 0;
					height: 0;
					border: 10rpx solid transparent;
					border-top-color: rgba(128, 128, 128, 1);
					border-bottom-width: 0;
				}
			}
		}
	}

	// 列表
	.list {
		padding: 32rpx;

		.item {
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			background: #ffffff;
			padding: 24rpx;
			overflow: hidden;

			.top-info {
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}
	}

	// 求租
	.rent-ask {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 216rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(238, 33, 45, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 216rpx;

				.title {
					width: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.sell-price {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.transfer-price {
					margin-left: 18rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);

					text {
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag-tit {
						padding: 6rpx 0rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);
					}

					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						margin-bottom: 6rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		// 适合场所

		.suitable-box {
			margin-top: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(82, 104, 139, 1);

			// padding-bottom: 30rpx;
			// border-bottom: 1px solid rgba(238, 238, 238, 1);
			.suitable {
				display: inline-block;
				letter-spacing: 0.4rpx;
				padding: 10rpx;
				border-radius: 4rpx;
				background: rgba(248, 249, 253, 1);
				margin-left: 12rpx;
				white-space: nowrap;
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}

	// 出租
	.rent-out {
		.title {
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 56, 56, 1);
		}

		.goods-tag {
			margin-top: 18rpx;

			.tag {
				white-space: nowrap;
				border-radius: 4px;
				background: rgba(255, 232, 234, 1);
				padding: 6rpx 12rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.tag:last-child {
				margin-right: 0;
			}
		}

		.contact-info {
			width: 70%;

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.name {
				width: calc(100% - 100rpx);
				height: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				margin-left: 24rpx;
			}
		}

		.visit-l {
			width: 30%;

			.visit-num {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				margin-bottom: 12rpx;
			}

			.visit-btn {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 33, 45, 1);
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.distance {
			width: 100%;
			padding: 0 12rpx 12rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			image {
				width: 18rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		// 浏览咨询统计
		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar {
				width: 40%;
				height: 46rpx;
				position: relative;

				image {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					position: absolute;
				}
			}

			.visit-l {
				width: 60%;
				height: 46rpx;

				.visit-num {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}
			}

		}

	}

	// 区域  筛选
	.dropdown-box {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: -640rpx;
		height: 640rpx;
		background: #fff;
		z-index: 99;
		overflow: hidden;
	}

	/* 新增区域样式 */
	.acea-box {}

	.acea-box .aside {
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 160rpx);
		left: 0;
		bottom: 100rpx;
		border-right: 1px solid #f7f7f7;
		border-bottom: 1px solid #f7f7f7;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.acea-box .conter {
		height: calc(100% - 160rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 0 14rpx;
		border-bottom: 1px solid #f7f7f7;
	}

	.acea-box .acea-btn {
		width: 100%;
		height: 160rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 18rpx;
	}

	.acea-box .acea-btn .reset {
		width: 45%;
		height: 100rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		color: #0000ff;
		background: #F5F6FA;
	}

	.acea-box .acea-btn .confirm {
		width: 45%;
		height: 100rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}

	/* 筛选 */
	.filtrate-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #ffffff;
		z-index: 99;
	}

	.filtrate-box .aside {
		padding-top: 24rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 200rpx;
		height: calc(100% - 100rpx);
		left: 0;
		bottom: 100rpx;
		background: #F8F8F8;
		/* background-color: #f7f7f7;
		overflow-y: auto;
		overflow-x: hidden; */
	}

	.filtrate-box .aside .dropdown-item {
		height: 88rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
		background-color: #ffffff;
		margin-bottom: 12rpx;
		max-width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter {
		height: calc(100% - 100rpx);
		position: absolute;
		margin: 0rpx 0 0 200rpx;
		padding: 24rpx 14rpx;
	}

	.filtrate-box .conter .dropdown-item {
		display: inline-block;
		width: 46%;
		background-color: #f6f6f6;
		margin-bottom: 18rpx;
		border-radius: 4rpx;
		text-align: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.filtrate-box .conter .dropdown-item:nth-child(2n) {
		margin-right: 18rpx;
	}

	.filtrate-box .conter .conter-title {
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.filtrate-box .conter .dropdown-item.on {
		background: rgba(255, 247, 248, 1);
		color: rgba(238, 33, 45, 1);
	}

	.filtrate-box .filtrate-btn {
		width: 100%;
		height: 100rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.filtrate-box .filtrate-btn .reset {
		width: 35%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #4b4b4b;
		background: #F5F6FA;
	}

	.filtrate-box .filtrate-btn .confirm {
		width: 65%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #ffffff;
		background: #EE212D;
	}
</style>